使用 VSCode 调试 Vuejs 项目

https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

// vue.config.js
module.exports = {
  configureWebpack: {
  // 在开发模式下打开 source-map 
   devtool: process.env.NODE_ENV === 'development' ? 'source-map' : '',
  }
}

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:1024",
      // ${workspaceFolder} 指代工作区文件夹
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
	// webpack:// 是一类协议地址
	// webpack:///src/* 指根目录 src 文件夹下的所有文件
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

配置 configureWebpack.output.library 后导致默认调试配置失效

官方文档描述的是相对干净的配置环境下的调试配置, 在已有的项目中被配置了 configureWebpack.output.library, 文件的路径就会发生改变, 导致 sourceMapPathOverrides key 对应不上

https://webpack.js.org/configuration/output/#outputlibrary https://webpack.js.org/configuration/dev-server/

通过 http://localhost:1024/webpack-dev-server 可以查看到生成的 .map 文件, 点击打开任意 .map 文件, 可以发现文件地址与 webpack:///src/* 不同之处在于 webpack://[configureWebpack.output.library]/src/*, 更改之后便可以正常使用 VSCode 进行调试.

configureWebpack: {
    output: {
      library: `MyLibrary`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName}`,
    },
    devtool: process.env.NODE_ENV === 'development' ? 'source-map' : '',
  },

对应的配置文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:1024",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack://MyLibrary/src/*": "${webRoot}/*"
      }
    }
  ]
}